<template>
  <div class="cover-upload-wrapper">
    <div class="cover-radio">
      <input type="radio" value="1"
      name="coverType" id="singleCover" checked
      v-model="coverNum">
      <label for="singleCover">单封面</label>
      <input type="radio" name="coverType" id="noCover"
      value="0" v-model="coverNum">
      <label for="noCover">无封面</label>
    </div>
    <image-input class="cover-upload" v-show="parseInt(coverNum)"
    v-model:image="cover">
    </image-input>
  </div>
</template>

<script>
import ImageInput from '@c/utils/Input/ImageInput.vue';

  export default {
    components: {
      ImageInput,
    },
    props: {
    },
    data() {
      return {
        coverNum: "1",
        cover: null,
      }
    },
    methods: {
      updateCover(image) {
        this.cover = image;
      },
      checkCover() {
        return parseInt(this.coverNum) && this.cover || !parseInt(this.coverNum);
      },
      getCover() {
        return parseInt(this.coverNum) ? this.cover : null;
      },
      fillCoverByUrl(url) {
        if(!url) {
          this.coverNum = "0";
        }

        this.$file.imgurlToImg(this.$baseURL + url).then(img => {
          return this.$file.imgToCanvas(img);
        }).then(canvas => {
          this.$file.canvasToBlob(canvas, 1, blob => {
            this.cover = new File([blob], this.$file.getFileName(url));
          })
        })
      },
      clear() {
        this.cover = null;
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--coverUploadWidth);
@lh: var(--coverUploadLineHeight);

.cover-upload-wrapper {
  width: @w;

  .cover-radio {
    display: flex;
    justify-content: left;
    align-items: center;
    height: @lh;
    font-size: calc(@lh * 0.5);

    input {
      margin-top: 0;
      margin-right: calc(@w * 0.01);
    }

    label {
      margin-right: calc(@w * 0.04);
    }
  }

  .cover-upload {
    margin-top: calc(@w * 0.03);
    margin-left: calc(@w * 0.01);
    --imageInputWidth: calc(@w * 0.24);
    --imageInputHeight: calc(@w * 0.135);
  }
}
</style>